<template>
  <div class="evaluate-info">
    <div class="user-info">
      <!--  用户头像    -->
      <el-avatar class="user-avatar" :size="40" :src="evaluate.createUserAvatar"/>
      <!--  用户昵称和评价时间  -->
      <div class="user-info-right">
        <div class="user-name">{{ evaluate.createUserName }}</div>
        <div class="evaluate-time">{{ evaluate.createdTime }}</div>
      </div>
    </div>
    <!--  购买商品的信息  -->
    <div class="purchase-goods-info">
      已购商品：{{ evaluate.skuName }}
    </div>
    <!-- 评价文本内容  -->
    <div class="evaluate-text">
      {{ evaluate.stringEvaluation }}
    </div>
    <!-- 评价图片  -->
    <div class="evaluate-image">
      <el-image v-for="(image, index) in evaluate.formatEvaluationModel.imageList" style="width: 200px;height: 200px; display: inline-block;" :key="index" :src="image" fit="contain" :preview-src-list="[image]" append-to-body/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'evaluate-info',
  props: {
    evaluate: Object
  }
}
</script>

<style lang="less" scoped>
.evaluate-info {
  .user-info {
    display: flex;

    .user-avatar {
      /deep/ img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }

    .user-info-right {
      font-size: 14px;
      color: #666;
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-left: 10px;

      .user-name {
        flex: 1;
        margin: 5px 0;
      }

      .evaluate-time {
        flex: 1;
      }
    }
  }

  .purchase-goods-info {
    margin: 10px 0;
    color: #999;
    font-size: 14px;
  }

  .evaluate-text {
    margin: 5px 0;
    font-size: 16px;
    color: rgb(109, 102, 102);
    line-height: 20px;
    padding: 10px;
  }

  .evaluate-image {
    display: flex;
    flex-wrap: wrap;
    /deep/ img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
